<template>
  <div class="app-container calendar-list-container">
    <div v-show="demandId || applyId" class="data-list">
      <el-row class="list-content">
        <el-col><span>{{$t('specialApplication.demandBasciInfo')}}</span></el-col><!--需求基本讯息-->
      </el-row>
      <div style="padding: 20px 0">
        <el-row>
          <el-col :span="4">
            <div class="w20">
              <div class="labelName">{{$t('specialApplication.demandBasciInfo')}}:</div><!--專案申请日期：-->
              <div class="labelName ml">{{ demand.createTime }}</div>
            </div>
          </el-col>
          <el-col :span="4">
            <div class="w20">
              <div class="labelName">BD Name：</div>
              <div class="labelName ml">{{ demand.bdName }}</div>
            </div>
          </el-col>
          <el-col :span="4">
            <div class="w20">
              <div class="labelName">BD.NO：</div>
              <div class="labelName ml">{{ demand.bdValue }}</div>
            </div>
          </el-col>
          <el-col :span="4">
            <div class="w20">
              <div class="labelName">Client：</div>
              <div class="labelName ml">{{ demand.clientName }}</div>
            </div>
          </el-col>
          <el-col :span="4">
            <div class="w20">
              <div class="labelName">End Date：</div>
              <div class="labelName ml">{{ demand.endDate }}</div>
            </div>
          </el-col>
          <el-col :span="4">
            <div class="w20">
              <div class="labelName">Territory：</div>
              <div class="labelName ml">{{ demand.territory }}</div>
            </div>
          </el-col>
          <el-col :span="4">
            <div class="w20">
              <div class="labelName">Sales：</div>
              <div class="labelName ml">{{ demand.sales }}</div>
            </div>
          </el-col>
          <el-col :span="4">
            <div class="w20">
              <div class="labelName">Presales：</div>
              <div class="labelName ml">{{ demand.presales }}</div>
            </div>
          </el-col>
          <el-col :span="4">
            <div class="w20">
              <div class="labelName">Decision maker：</div>
              <div class="labelName ml">{{ demand.decisionMaker }}</div>
            </div>
          </el-col>
          <el-col :span="4">
            <div class="w20">
              <div class="labelName">Estimated Budget：</div>
              <div class="labelName ml" v-format="'#,##0'" >{{ demand.estimatedBudget }}</div>
            </div>
          </el-col>
          <el-col :span="4">
            <div class="w20">
              <div class="labelName">Estimated cost：</div>
              <div class="labelName ml" v-format="'#,##0'" >{{ demand.estimatedCost }}</div>
            </div>
          </el-col>
          <el-col :span="4">
            <div class="w20">
              <div class="labelName">Status：</div>
              <div class="labelName ml">{{ demand.status }}</div>
            </div>
          </el-col>
        </el-row>
      </div>
    </div>

    <div class="data-list">
      <el-row class="list-content">
        <el-col><span>{{$t('specialApplication.projectApply')}}</span></el-col><!--专编申请-->
      </el-row>

      <el-form :inline="true" :model="apply" style="padding: 20px 0">
        <el-row style="padding-bottom: 10px">
          <el-col :span="4">
            <div class="w20">
              <div class="labelName">{{$t('specialApplication.projectName')}}</div><!--专案名称-->
              <el-input v-model="apply.projectName" :placeholder="$t('specialApplication.enterProjectName')" :clearable="show !== '1' && !ratify" :disabled="show === '1' || ratify === 'ratify'" class="filter-item"></el-input><!--请输入名称-->
            </div>
          </el-col>
          <el-col :span="4">
            <div class="w20">
              <div class="labelName">{{$t('specialApplication.executeBu')}}</div><!--执行部门-->
              <el-select :clearable="show !== '1' && !ratify" :disabled="show === '1' || ratify === 'ratify'"  v-model="apply.executeBu" :placeholder="$t('placeholder.choose')">
                <el-option v-for="item in departList" :key="item" :label="item" :value="item"></el-option>
              </el-select>
            </div>
          </el-col>
          <!--业务部门-->
          <!-- <el-col :span="4">
            <div class="w20">
              <div class="labelName">{{$t('specialApplication.businessBu')}}</div>
              <el-select :clearable="show !== '1' && !ratify" :disabled="show === '1' || ratify === 'ratify'"  v-model="apply.businessBu" :placeholder="$t('placeholder.choose')">
                <el-option v-for="item in departList" :key="item" :label="item" :value="item"></el-option>
              </el-select>
            </div>
          </el-col> -->

          <el-col :span="4">
            <div class="w20">
              <div class="labelName">{{$t('specialApplication.identifyType')}}</div><!--认列方式-->
              <dict-select :clearable="show !== '1' && !ratify" :disabled="show === '1' || ratify === 'ratify'" v-model="apply.identifyType" code="identifyType"></dict-select>
            </div>
          </el-col>

          <!--修改第5码：財經類型-->
          <!-- <el-col :span="4">
            <div class="w20">
              <div class="labelName">{{$t('specialApplication.financeType')}}</div>
              <dict-select :clearable="show !== '1' && !ratify" :disabled="show === '1' || ratify === 'ratify'" v-model="apply.financeType" code="financeType"></dict-select>
            </div>
          </el-col> -->

          <el-col :span="4">
            <div class="w20">
              <div class="labelName">{{$t('specialApplication.country')}}</div><!--第1码：区域(国家)別-->
              <el-select v-model="apply.country" :clearable="show !== '1' && !ratify" :disabled="show === '1' || ratify === 'ratify'" :filterable="true" :placeholder="$t('placeholder.choose')">
                <el-option v-for="item in countryList" :key="item.value" :label="item.label" :value="item.remark"></el-option>
              </el-select>
            </div>
          </el-col>
          <el-col :span="4">
            <div class="w20">
              <!--修改 subCategory-->
              <div class="labelName">{{$t('specialApplication.subCategory')}}</div><!--第2码：BU-->
              <dict-select :clearable="show !== '1' && !ratify" :disabled="show === '1' || ratify === 'ratify'" v-model="apply.subCategory" code="subCategoryAndAccount"></dict-select>
            </div>
          </el-col>

          <!--第3码：Dept-->
          <!-- <el-col :span="4">
            <div class="w20">
              <div class="labelName">{{$t('specialApplication.fourType')}}</div>
              <dict-select :clearable="show !== '1' && !ratify" :disabled="show === '1' || ratify === 'ratify'" v-model="apply.fourType" code="fourType"></dict-select>
            </div>
          </el-col> -->

          <el-col :span="4">
            <div class="w20">
              <div class="labelName">{{$t('specialApplication.parentCategory')}}</div><!--第4码：专案类型-大类-->
              <dict-select :clearable="show !== '1' && !ratify" :disabled="show === '1' || ratify === 'ratify'" v-model="apply.parentCategory" code="parentCategory"></dict-select>
            </div>
          </el-col>

    
          <!--第5,6码：专案开立年度-->
          <el-col :span="4">
            <div class="w20">
              <div class="labelName">{{$t('specialApplication.year')}}</div>
              <dict-select :clearable="show !== '1' && !ratify" :disabled="show === '1' || ratify === 'ratify'" v-model="apply.year" code="projectYear"></dict-select>
            </div>
          </el-col>
          <el-col :span="4">
            <div class="w20">
              <div class="labelName">{{$t('specialApplication.month')}}</div><!--第7码：专案开立月份-->
              <dict-select :clearable="show !== '1' && !ratify" :disabled="show === '1' || ratify === 'ratify'" v-model="apply.month" code="month"></dict-select>
            </div>
          </el-col>
          <el-col :span="4">
            <div class="w20" >
              <div class="labelName">{{$t('specialApplication.applyMaterials')}}</div> <!--申请资料-->
              <div>
                    <el-upload
                      :disabled="addQuotationDialog"
                      class="upload-demo"
                      ref="upload"
                      accept=".pdf"
                      :action="urlUpload"
                      :file-list="apply.fileList"
                      :auto-upload="true"
                      :on-success="(response,file)=>handleUpload(response)"
                      :on-remove="(res)=>removeFile(res)"
                      :on-preview="handlePreview"
                      :before-upload="beforeAvatarUpload"
                    >
                      <el-button size="small" type="primary" :style="{ display: visibleButton }">{{$t('specialApplication.upload')}}PDF</el-button>
                    </el-upload>
              </div>
            </div>
          </el-col>
          <!--流水号-->
          <!-- <el-col v-show="apply.parentCategory === 'Y' || apply.parentCategory === 'Z' " :span="4">
            <div class="w20">
              <div class="labelName">{{$t('specialApplication.projectOrder')}}</div>
              <el-input :clearable="show !== '1' && !ratify" :disabled="show === '1' || ratify === 'ratify'" v-model="apply.projectOrder" type="number" class="filter-item"></el-input>
            </div>
          </el-col> -->
        </el-row>

        <el-row style="margin-top: 10px">
          <el-col style="text-align: center">
            <div>
              <div class="yt-btn yt-btn-ys" @click="previewNo" type="primary">{{$t('specialApplication.projectPreview')}}</div><!--专编预览-->
              <div class="yt-tag-success" v-if="previewNoFla">
                <el-tag closable @close="previewNoFla = false"><i class="el-icon-success"></i>{{ previewNoText }}</el-tag>
              </div>
            </div>
            <!--重复性检测-->
            <!-- <div style="margin-top: 20px">
              <div class="yt-btn yt-ml8" @click="repeatPreviewNo" type="primary">{{$t('specialApplication.repeatPreviewNo')}}
              </div>
              <div :class="repeatPreviewNoPdFla ? 'yt-tag-success' : 'yt-tag-error'" v-if="repeatPreviewNoFla">
                <el-tag closable @close="repeatPreviewNoFla = false"><i :class=" repeatPreviewNoPdFla ? 'el-icon-success' : 'el-icon-error' "></i>{{ repeatPreviewNoText }}</el-tag>
              </div>
            </div> -->
          </el-col>
        </el-row>
      </el-form>
    </div>
    <div class="data-bnt">
      <div class="yt-btn" @click="getBack" type="primary">{{$t('button.back')}}</div><!--返回-->
      <div class="yt-btn" v-if="show !== '1' && !ratify" @click="reset" type="primary">{{ $t('button.reset') }}</div>
      <div class="yt-btn yt-btn-ys yt-ml8" v-if="show !== '1' && !ratify" @click="submit" type="primary">{{$t('specialApplication.submitApply')}}</div><!--提交申请-->
    </div>
  </div>
</template>

<script>
  import { queryApply, queryByApplyId, submitApply, previewNo } from '@/api/specialApplication/index';
  import { selectBu } from '@/api/bu/index';

  export default {
    name: 'specialApplication',
    components: {
      'dict-select': () => import('@/components/Dict/dictValueSelect')
    },
    data() {
      return {
        visibleButton: '',
        addQuotationDialog: false,
        ratify: null,
        show: null,
        countryList: [],
        previewNoText: '',
        repeatPreviewNoText: '',
        previewNoFla: false,
        repeatPreviewNoFla: false,
        repeatPreviewNoPdFla: true,
        config: Config.I18n,
        total: 0,
        demandId: '',
        applyId: '',
        demand: {},
        apply: { fileList: [] },
        departList: [],
        typeOptions: [],
        fileList: [],
        urlUpload: '/api/admin/excel/uploadfile',
        rules: {
          name: [{ required: true, message: this.$t('specialApplication.activityName'), trigger: 'blur' }] // 请输入活动名称
        }
      };
    },
    mounted() {
      this.ratify = this.$route.query.ratify
      this.show = this.$route.query.status
      // 修改 country 
      this.countryList = this.$store.getters.allDic.newCountry;
      //  || this.$route.query.applyId
      if (this.show === '1' || this.ratify === 'ratify') {
        this.addQuotationDialog = true
        this.visibleButton = 'none'
      }
      this.getData();
      this.getDepart();
    },
    methods: {
      handlePreview(file) {
        if (file.name && file.url) {
          const a = document.createElement('a');
          // url的参数中有+等特殊字符时 后台接收到的会被替换成空格,编码格式的问题, 使用encodeURIComponent编码解决这个问题
          const href = '/api/admin/excel/downloadfiles?fileName=' + encodeURIComponent(file.name) + '&fileNamePath=' + encodeURIComponent(file.url);
          console.log('href', href);
          a.download = Date.now();
          a.href = href;
          a.click();
        }
      },
      submitUpload() {
        this.$refs.upload.submit()
      },
      // 上传成功
      handleAvatarSuccess(res) {
        // this.addQuotationDialog = false;
        console.log('uploadsuccess', res)
        // this.fileList = [];
      },
      handleUpload(res) {
        console.log(res)
        // 上传成功之前获取文件信息
        this.apply.fileList.push({ name: res.data.fileName, url: res.data.fileNamesPath })
        console.log(this.apply.fileList)
      },
      removeFile(res) {
        // 删除文件
        this.apply.fileList.forEach((item, i) => {
          if (item.name === res.name) {
            this.apply.fileList.splice(i, 1)
          }
        })
      },
      // 上传成功之前限制格式或大小
      beforeAvatarUpload(file) {
        const isType =
          file.type === 'application/pdf';
        const isLt2M = file.size / 1024 / 1024 < 10;
        if (!isType) {
          this.$message.error(this.$t('demandQuotation.supportFileTypeTwo')); // 上传文件支持PDF格式文件!
        }
        if (!isLt2M) {
          this.$message.error(this.$t('demandQuotation.supportFileSize')); // 上传文件大小不能超过10MB!
        }
        return isType && isLt2M;
      },
      getBack() {
        this.$router.go(-1);
      },
      reset() {
        this.apply = { list: [] };
      },

      getDepart() {
        selectBu().then(res => {
          this.departList = res.data;
        });
      },
      hanldFileList() {
        if (this.apply.fileList && this.apply.fileList.length > 0) {
          this.apply.fileList.forEach(item => {
            if (item.uid) {
              delete item.uid
            }
            if (item.status) {
              delete item.status
            }
          })
        }
      },
      // 重复性检测
      repeatPreviewNo() {
        if (this.previewNoText === '') {
          this.$message({
            message: this.$t('specialApplication.makeProjectPreviewFirst'), // 请先生成专编预览
            type: 'error'
          });
        } else {
          // applyProjectDemandCheck({ projectNo: this.previewNoText }).then(res => {
          //   if (res.data) {
          //     this.repeatPreviewNoFla = true;
          //     this.repeatPreviewNoPdFla = true;
          //     this.repeatPreviewNoText = this.$t('specialApplication.theProjectEffective'); // 该专编有效
          //   } else {
          //     this.repeatPreviewNoFla = true;
          //     this.repeatPreviewNoPdFla = false;
          //     this.repeatPreviewNoText =
          //       this.$t('specialApplication.theProjectExistedInERP'); // 该专编在ERP系统已存在，请重新确认需求讯息。
          //   }
          // });
        }
      },
      // 专编预览
      previewNo() {
        if (this.apply.country === '' || this.apply.country === undefined) {
          this.$message({
            message: this.$t('specialApplication.selectCountry'), // 请选择区域(国家)別
            type: 'error'
          });
          return false;
        }
        if (
          this.apply.parentCategory === '' ||
          this.apply.parentCategory === undefined
        ) {
          this.$message({
            message: this.$t('specialApplication.selectParentCategory'), // 请选择第4码：专案类型-大类
            type: 'error'
          });
          return false;
        }
        if (
          this.apply.subCategory === '' ||
          this.apply.subCategory === undefined
        ) {
          this.$message({
            message: this.$t('specialApplication.selectSubCategory'), // 请选择第3码：专案类型-小类
            type: 'error'
          });
          return false;
        }
        // if (this.apply.fourType === '' || this.apply.fourType === undefined) {
        //   this.$message({
        //     message: this.$t('specialApplication.selectFourType'), // 请选择第4码
        //     type: 'error'
        //   });
        //   return false;
        // }
        if (this.apply.year === '' || this.apply.year === undefined) {
          this.$message({
            message: this.$t('specialApplication.selectYear'), // 请选择第5,6码：专案开立年度
            type: 'error'
          });
          return false;
        }
        if (this.apply.month === '' || this.apply.month === undefined) {
          this.$message({
            message: this.$t('specialApplication.selectMonth'), // 请选择第7码：专案开立月份
            type: 'error'
          });
          return false;
        }
        // if (
        //   this.apply.parentCategory === 'Y' ||
        //   this.apply.parentCategory === 'Z'
        // ) {
        //   if (
        //     this.apply.projectOrder === '' ||
        //     this.apply.projectOrder === undefined ||
        //     this.apply.projectOrder.length !== 3
        //   ) {
        //     this.$message({
        //       message: this.$t('specialApplication.projectOrderTips'), // 请填写流水号，且只可输入三位数字
        //       type: 'error'
        //     });
        //     return false;
        //   }
        // } else {
        //   this.apply.projectOrder = '';
        // }
        this.hanldFileList()
        const obj2 = Object.assign({}, this.apply);
        delete obj2.fileList
        console.log('obj2', JSON.stringify(obj2))
        console.log('apply', JSON.stringify(this.apply))
        previewNo(obj2).then(res => {
          if (res.status === 200) {
            this.previewNoText = res.data;
            this.previewNoFla = true;
          } else {
            this.$message({
              message: this.$t('specialApplication.previewError'), // 该专编申请已经审核通过,不能重复申请
              type: 'error'
            });
          }
        });
      },
      getData() {
        if (this.$route.query.distinction) {
          this.applyId = this.$route.query.applyId;
          if (this.applyId) {
            queryByApplyId(this.applyId).then(res => {
              if (res.data.demand) {
                this.demand = res.data.demand;
              }
              if (res.data.applyProjectDemand) {
                this.apply = res.data.applyProjectDemand;
              }
            });
          }
        } else {
          this.demandId = this.$route.query.demandId;
          if (this.demandId) {
            queryApply(this.demandId).then(res => {
              if (res.data.demand) {
                this.demand = res.data.demand;
              }
              if (res.data.applyProjectDemand) {
                this.apply = res.data.applyProjectDemand;
              }
            });
          }
        }
      },
      submit() {
        if (
          this.apply.projectName === '' ||
          this.apply.projectName === undefined
        ) {
          this.$message({
            message: this.$t('specialApplication.pleaseEnterProjectName'), // 请输入专案名称
            type: 'error'
          });
          return false;
        }
        if (
          this.apply.executeBu === '' ||
          this.apply.executeBu === undefined
        ) {
          this.$message({
            message: this.$t('specialApplication.enterExecuteBu'), // 请选择执行部门
            type: 'error'
          });
          return false;
        }
        // if (
        //   (this.demandId || this.applyId) &&
        //   (this.apply.businessBu === '' ||
        //     this.apply.businessBu === undefined)
        // ) {
        //   this.$message({
        //     message: this.$t('specialApplication.enterBusinessBu'), // 请选业务部门
        //     type: 'error'
        //   });
        //   return false;
        // }
        if (this.apply.country === '' || this.apply.country === undefined) {
          this.$message({
            message: this.$t('specialApplication.selectCountry'), // 请选择区域(国家)別
            type: 'error'
          });
          return false;
        }
        if (
          this.apply.parentCategory === '' ||
          this.apply.parentCategory === undefined
        ) {
          this.$message({
            message: this.$t('specialApplication.selectParentCategory'), // 请选择第2码：专案类型-大类
            type: 'error'
          });
          return false;
        }
        if (
          this.apply.subCategory === '' ||
          this.apply.subCategory === undefined
        ) {
          this.$message({
            message: this.$t('specialApplication.selectSubCategory'), // 请选择第3码：专案类型-小类
            type: 'error'
          });
          return false;
        }
        // if (this.apply.fourType === '' || this.apply.fourType === undefined) {
        //   this.$message({
        //     message: this.$t('specialApplication.selectFourType'), // 请选择第4码
        //     type: 'error'
        //   });
        //   return false;
        // }
        if (this.apply.year === '' || this.apply.year === undefined) {
          this.$message({
            message: this.$t('specialApplication.selectYear'), // 请选择第5,6码：专案开立年度
            type: 'error'
          });
          return false;
        }
        if (this.apply.month === '' || this.apply.month === undefined) {
          this.$message({
            message: this.$t('specialApplication.selectMonth'), // 请选择第7码：专案开立月份
            type: 'error'
          });
          return false;
        }
        // if (
        //   this.apply.parentCategory === 'Y' ||
        //   this.apply.parentCategory === 'Z'
        // ) {
        //   if (
        //     this.apply.projectOrder === '' ||
        //     this.apply.projectOrder === undefined ||
        //     this.apply.projectOrder.length !== 3
        //   ) {
        //     this.$message({
        //       message: this.$t('specialApplication.projectOrderTips'), // 请填写流水号，且只可输入三位数字
        //       type: 'error'
        //     });
        //     return false;
        //   }
        // } else {
        //   this.apply.projectOrder = '';
        // }

        if (this.demandId) {
          this.apply.demandId = this.demandId
        }

        this.hanldFileList()
        if (this.repeatPreviewNoPdFla) {
          // 上传资料
          // this.submitUpload();
          submitApply(this.apply).then(res => {
            if (res.status === 200) {
              if (this.demandId) {
                this.$router.push('/demandManager/maintenance');
              } else if (this.applyId) {
                this.$router.push('/demandManager/myApplication');
              } else {
                this.$message.success(this.$t('specialApplication.submitSuccess')); // 提交成功
                this.reset();
              }
            } else {
              this.$message({
                message: this.$t('specialApplication.previewError'), // 该专编申请已经审核通过,不能重复申请
                type: 'error'
              });
            }
          });
        } else {
          // applyProjectDemandCheck({ projectNo: this.previewNoText }).then(res => {
          //   if (res.data) {
          //     // 上传资料
          //     // this.submitUpload();
          //     submitApply(this.apply).then(res => {
          //       if (res.status === 200) {
          //         if (this.demandId) {
          //           this.$router.push('/demandManager/maintenance');
          //         } else if (this.applyId) {
          //           this.$router.push('/demandManager/myApplication');
          //         } else {
          //           this.$message.success(this.$t('specialApplication.submitSuccess')); // 提交成功
          //           this.reset();
          //         }
          //       } else {
          //         this.$message({
          //           message: this.$t('specialApplication.previewError'), // 该专编申请已经审核通过,不能重复申请
          //           type: 'error'
          //         });
          //       }
          //     });
          //   } else {
          //     this.repeatPreviewNoFla = true;
          //     this.repeatPreviewNoPdFla = false;
          //     this.repeatPreviewNoText =
          //       this.$t('specialApplication.theProjectExistedInERP'); // 该专编在ERP系统已存在，请重新确认需求讯息。
          //   }
          // });
        }
      }
    }
  };
</script>
<style scoped>
  .title_text {
    font-size: 20px;
    padding: 15px;
    border-bottom: 1px solid black;
    width: 200px;
    text-align: center;
  }

  .text {
    color: red;
    font-weight: bold;
  }
  .ml{
    margin-left: 15px;
    color:#939599;
  }
</style>
